<!-- 体检科室管理页面  wk-2022-12-12 -->
<script setup lang='ts' name="Department">
import {onBeforeMount, ref, reactive} from 'vue'
import { ElMessage, ElMessageBox, FormRules} from 'element-plus'
import {HeaderData, Operation as Oper, RowOperbuttons} from '@/components/dTable/dTable'
import {OperButton, SearchButton, SearchFromItem, SearchFromJustify} from '@/components/dTable/dHeader'
import {PageConfig, defaultPage, defaultPageSize, defaultPageSizes, defaultLayout} from '@/components/dTable/dFooter'
import {ColorTheme, ColorRed, DialogType} from '@/api/config'
import {getDepartmentList, DepartmentInfor, TableOperation, deleteDepartment, DepartmentFormInfor, SearchDepartmentFromData} from '@/api/physicalExaminationManager/department'
import operation from '@/components/dTable/components/operation.vue'
import pageContainer from '@/components/pageContainer.vue'
import dTablePromote from '@/components/dTable/dTablePromote.vue'
import useStore from '@/store/common'
import {transfDicArrData, getObjectByKey} from '@/util/common'
import addDepartment from './addDepartment.vue'
const {store} = useStore.setup()
//当前页面 表格数据 定义
const tableData = ref<Array<DepartmentInfor&RowOperbuttons>>([])

//显示加载状态
const showLoading = ref(false)

//表格头部数据定义
const tableHeaderData = ref<Array<HeaderData>>([
  {prop:'deptCode', label:'科室编码', columnType:'text', align:'left', 'min-width':'100'},
  {prop:'deptName', label:'科室名称', columnType:'text', align:'left', 'min-width':'100'},
  {prop:'checkTypeName', label:'检查类型', columnType:'text', align:'left', 'min-width':'100'},
  {prop:'sort', label:'排序', columnType:'text', align:'left', 'min-width':'100'},
  {prop:'oper', label:'操作', columnType:'slot', align:'left', 'width':'90', fixed:'right'}
])

//搜索项数据定义
const searchFromItems = ref<Array<SearchFromItem>>([
  {label:'科室名称', placeholder:'请输入科室名称', prop:'deptName', type:'input', enterSubmit:true},
  {label:'检查类型', placeholder:'请选择检查类型', prop:'checkType', type:'selete', changeSubmit:true, seleteData:[]}
])

const searchFromRules = reactive<FormRules>({
  deptName:[
    {required:false, message:'长度应不超过50个字符', max:50, trigger: ['change', 'blur']}
  ]
})

const searchFromData = reactive<SearchDepartmentFromData>({deptName:null, checkType:null})

//表头按钮
const operButtons = ref<Array<OperButton>>([
  {label:'新增', type:'noraml', iconConfig:{icon:'common-add', type:'custom'}, code:'add'}
])

//分页配置
const pageConfig = ref<PageConfig>({
  currentPage:defaultPage,
  pageSize:defaultPageSize,
  pageSizes:defaultPageSizes,
  total:0,
  disabled:false,
  layout:defaultLayout
})

//表单靠左还是靠右
const searchFromJustify = ref<SearchFromJustify>('flexStart')

//搜索按钮配置
const searchButtons = ref<Array<SearchButton>>([
  {type:'search'},
  {type:'clear'}
])

//操作按钮定义
const rowOperButtons:Array<Oper> = [{code:'edit', label:'编辑', iconConfig:{icon:'common-edit', type:'custom', color:ColorTheme, size:20}}, {code:'delete', label:'删除', iconConfig:{icon:'common-delete', type:'custom', color:ColorRed, size:20}}]

//后端数据拼接字段事件
const setTableData = (data:Array<DepartmentInfor>) => {
  const dataArr:Array<DepartmentInfor&RowOperbuttons> = []
  data.forEach((item) => {
    dataArr.push({...item, oper:rowOperButtons})
  })
  tableData.value = dataArr
}

//搜索数据事件
const searchData = (resetPage?:boolean) => {
  showLoading.value = true
  if (resetPage) pageConfig.value.currentPage = 1
  getDepartmentList({...searchFromData, page:pageConfig.value.currentPage, limit:pageConfig.value.pageSize}).then((res) => {
    showLoading.value = false
    const {data} = res.data
    pageConfig.value.total = data.total === null ? 0 : data.total
    setTableData(data.records)
  }).catch((error) => {
    showLoading.value = false
    console.warn(error)
  })
}

//搜索事件
const onSubmit = () => {
  searchData(true)
}

//清除搜索栏数据事件
const clearForm = () => {
  searchData(true)
}

//清空搜索表单事件
const onFormClear = () => {
  clearForm()
  searchData(true)
}

//显示弹窗
const showDialog = ref(false)

//弹窗类型
const dialogType = ref<DialogType>('add')

//基础体检科室数据模板
const baseDepartmentFromInfor = {deptName:'', deptCode:'', sort:null, checkType:'', checkTypeName:'', id:undefined}

//编辑的体检科室数据
const currDepartmentFromData = ref<DepartmentFormInfor>({deptName:'', deptCode:'', sort:null, checkType:'', checkTypeName:'', id:undefined})

//清除数据
const clearDialogData = () => {
  currDepartmentFromData.value = {...baseDepartmentFromInfor}
}

//操作按钮事件
const onOperation = (name:TableOperation) => {
  if (name === 'add') {
    clearDialogData()
    dialogType.value = 'add'
    showDialog.value = true
  }
}

//关闭窗口事件
const onClose = () => {
  showDialog.value = false
  searchData()
}

//分页尺寸改变事件
const onSizeChange = () => {
  searchData(true)
}

//当前页改变事件
const onCurrentChange = () => {
  searchData()
}

//编辑体检科室信息事件
const editDepartmentInfor = (row:DepartmentFormInfor) => {
  currDepartmentFromData.value = {...row}
  dialogType.value = 'edit'
  showDialog.value = true
}

//体检科室删除
const deleteDepartmentInfor = (row:DepartmentInfor) => {
  ElMessageBox.confirm(
    '是否确认删除此科室？',
    '删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      return deleteDepartment({deptId:row.id + ''})
    }).then(() => {
      ElMessage.success('删除成功')
      searchData(true)
    }).catch((error) => {
      console.warn(error)
    })
}


//操作插槽事件（编辑，删除）事件
const cellOperation = (name:string, row:DepartmentInfor) => {
  if (name === 'edit') {
    editDepartmentInfor(row)
  } else if (name === 'delete') {
    deleteDepartmentInfor(row)
  }
}

//获取字典
const getDic = () => {
  store.getDicData('check_type').then((res) => {
    const item = getObjectByKey(searchFromItems.value, 'prop', 'checkType')
    if (item && item.type === 'selete') {
      item.seleteData = transfDicArrData(res)
    }
  })
}

//DOM即将挂载
onBeforeMount(() => {
  getDic()
  searchData()
})
</script>

<template>
  <page-container>
    <d-table-promote
      :label-width="70"
      :show-loading="showLoading"
      :oper-buttons="operButtons"
      :table-data="tableData"
      :table-header-data="tableHeaderData"
      :page-config="pageConfig"
      :search-form-data="searchFromData"
      :search-rules="searchFromRules"
      :search-form-items="searchFromItems"
      :search-from-justify="searchFromJustify"
      :search-buttons="searchButtons"
      @form-submit="onSubmit"
      @form-clear="onFormClear"
      @operation="onOperation"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    >
      <template #oper="scope">
        <operation :row="scope.row" :col="scope.item" @opertion-click="cellOperation" />
      </template>
    </d-table-promote>
  </page-container>
  <add-department v-if="showDialog" :show-dialog="showDialog" :dialog-type="dialogType" :department-data="currDepartmentFromData" @close="onClose" />
</template>

<style scoped>
</style>